<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../../../layuiadmin/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../../layuiadmin/style/admin.css" media="all">
		<link rel="stylesheet" href="../../../../css/common.css" media="all">
		<style type="text/css">
			.show_img_ul {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-top: 10px;
			}

			.show_img_li {
				text-align: center;
				padding: 10px;
			}

			.show_img_li p,
			.show_img_li1 p {
				text-align: center;
				cursor: pointer;
			}

			.show_img_li img {
				width: 120px;
				height: 120px;
				margin-bottom: 8px;
			}

			.show_img_li1 img {
				width: 300px;
				height: 200px;
				margin-bottom: 8px;
			}

			.layui-upload-img {
				width: 92px;
				height: 92px;
				margin: 0 10px 10px 0;
			}

			.layui-upload-img {
				width: 90px;
				height: 90px;
				margin: 0;
			}

			.layui-elem-quote {
				width: 100%;
				/* left: ; */
				margin: 10px 0px 0px 0px;
			}

			.layui-elem-quote li {
				width: 90px;
				display: inline-block;
				margin-right: 5px;
			}

			.layui-elem-quote li .layui-input {
				display: initial;
			}

			.layui-elem-quote li a {
				position: absolute;
				top: 0;
				display: block;
			}

			.layui-elem-quote li a i {
				font-size: 24px;
				background-color: #008800;
			}

			#lunbo .item_img img {
				width: 90px;
				height: 90px;
			}

			#lunbo li {
				position: relative;
				margin: 10px;
			}

			#lunbo li .operate {
				color: #000;
				display: none;
			}

			#lunbo li .toleft {
				position: absolute;
				top: 40px;
				left: 1px;
				cursor: pointer;
			}

			#lunbo li .toright {
				position: absolute;
				top: 40px;
				right: 1px;
				cursor: pointer;
			}

			#lunbo li .close {
				position: absolute;
				top: -8px;
				right: -8px;
				cursor: pointer;
			}

			#lunbo li:hover .operate {
				display: block;
			}
		</style>
	</head>

	<body>

		<div class="layui-fluid">
			<div class="layui-row" id="view">
				<form class="layui-form" lay-filter="test_detail">
					<div class="layui-card">
						<div class="layui-card-body">
							<!--<div class="layui-form-item catid" id="catid">
								<label class="layui-form-label">分类名称</label>
							</div>-->
							<!--<div class="layui-form-item">
								<label class="layui-form-label">店铺 <span style="color:red">*</span></label>
								<div class="layui-input-inline">
									<input type="text" name="shopname" lay-verify="required" placeholder="请选择店铺" autocomplete="off" class="layui-input cat_name">
									<input type="hidden" name="shopid" lay-verify="required" placeholder="请选择店铺" autocomplete="off" class="layui-input cat_id">
								</div>
								<div class="layui-form-mid layui-word-aux">
									<a href="Javascript:;" onclick="searchdata('shopid')">选择</a>
								</div>
							</div>-->
							<!-- <div class="layui-form-item">
								<label class="layui-form-label">商品编码<span style="color:red">*</span></label>
								<div class="layui-input-block">
									<input type="text" name="sku_id" placeholder="请输入商品编码" autocomplete="off"
										class="layui-input" lay-verify="required">
								</div>
							</div> -->
							<div class="layui-form-item">
								<label class="layui-form-label">分类 <span style="color:red">*</span></label>
								<div class="layui-input-inline">
									<input type="text" name="catname" lay-verify="required" placeholder="请选择分类"
										autocomplete="off" class="layui-input cat_name">
									<input type="hidden" name="catid" lay-verify="required" placeholder="请选择分类"
										autocomplete="off" class="layui-input cat_id">
								</div>
								<div class="layui-form-mid layui-word-aux">
									<a href="Javascript:;" onclick="searchdata('catid')">选择</a>
								</div>
							</div>
							<!-- <div class="layui-form-item">
								<label class="layui-form-label">分类名称</label>
								
							</div> -->
							<div class="layui-form-item">
								<label class="layui-form-label">产品状态</label>
								<div class="layui-input-block on_off"></div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">商品类型</label>
								<div class="layui-input-block goods_type"></div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">客户端</label>
								<div class="layui-input-block icon_type"></div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">产品名称</label>
								<div class="layui-input-block">
									<input type="text" name="spuname" placeholder="请输入产品名称" lay-verify="required"
										autocomplete="off" class="layui-input">
								</div>
							</div>

							<!--<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">品牌名称</label>
									<div class="layui-input-inline">
										<input type="text" name="brandname" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
									</div> 
									<div class="layui-form-mid layui-word-aux"><a href="Javascript:;" onclick="searchdata('brand_id')">选择</a></div>
								</div>
								<div class="layui-inline" style="display: none;">
									<label class="layui-form-label">品牌编号</label>
									<div class="layui-input-inline">
										<input type="text" name="brandid" placeholder="请输入品牌编号" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div> -->

							<div class="layui-form-item">
								<label class="layui-form-label">规格名称</label>
								<div class="layui-input-block">
									<input type="text" name="specname" placeholder="请输入规格名称" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">规格参数</label>
								<div class="layui-input-block">
									<input type="text" name="specparam" placeholder="请输入规格参数" autocomplete="off"
										class="layui-input">
								</div>
							</div>

							<!--商品公告信息-->
							<div class="layui-form-item">
								<!-- <div class="layui-inline">
									<label class="layui-form-label">成本价<span style="color:red">*</span></label>
									<div class="layui-input-inline">
										<input type="text" name="cost_price" placeholder="请输入成本价" lay-verify="number"
											autocomplete="off" class="layui-input">
									</div>
								</div> -->
								<div class="layui-inline">
									<label class="layui-form-label">原价<span style="color:red">*</span></label>
									<div class="layui-input-inline">
										<input type="text" name="price" placeholder="请输入购买原价" lay-verify="number"
											autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">购买会员价<span style="color:red">*</span></label>
									<div class="layui-input-inline">
										<input type="text" name="price_member" lay-verify="number"
											placeholder="请输入购买会员价" autocomplete="off" class="layui-input">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">最低购买数量</label>
								<div class="layui-input-block">
									<input type="text" name="low_quantity" placeholder="请输入最低购买数量" autocomplete="off"
										class="layui-input" lay-verify="required">
								</div>
							</div>
							<div class="layui-form-item">
								<!--<div class="layui-inline">
									<label class="layui-form-label">积分抵扣</label>
									<div class="layui-input-inline">
										<input type="text" name="score" placeholder="请输入积分抵扣"   autocomplete="off" class="layui-input">
									 
									</div>
								</div>-->
								<div class="layui-inline">
									<label class="layui-form-label">商品运费</label>
									<div class="layui-input-inline">
										<input type="text" name="price_waybill" placeholder="请输入商品运费" autocomplete="off"
											class="layui-input">

									</div>
								</div>
							</div>
							<!--商品公告信息-->


							<div class="layui-form-item">
								<label class="layui-form-label">产品简介</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入产品简介" name="intro" class="layui-textarea"></textarea>
								</div>
							</div>

							<!--商品公告信息-->


							<div class="layui-form-item">
								<label class="layui-form-label">商品介绍</label>
								<div class="layui-input-block">
									<textarea class="layui-textarea layui-hide" name="content" lay-verify="content"
										id="demo_editor"></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">产品图片</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal"
										onclick="choose(0)">上传图片</button>
									<ul class="show_img_ul" id="zhutu"></ul>
								</div>
							</div>
							<!--<div class="layui-form-item">
								<label class="layui-form-label">商品缩略图</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal" onclick="choose(1)">上传图片</button>
									
									<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
										<ul class="show_img_ul" id="thumbnail"></ul>
									</blockquote>
								</div>
							</div>-->
							<div class="layui-form-item">
								<label class="layui-form-label">商品轮播图</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal"
										onclick="choose(2)">上传图片</button>

									<blockquote class="layui-elem-quote layui-quote-nm layui-elem-quote"
										style="margin-top: 10px;">
										<ul class="show_img_ul" id="lunbo"></ul>
									</blockquote>
								</div>
							</div>



							<div class="layui-form-item upvideo">
								<label class="layui-form-label">视频</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal upimgbtn"
										onclick="choose(3)">上传视频</button>
									<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
										预览视频：
										<div class="layui-upload-list upload_list" id="video_url">
											<ul class="show_img_ul" id="video"></ul>
										</div>
									</blockquote>

								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">商品视频封面</label>
								<div class="layui-input-block">
									<button type="button" class="layui-btn layui-btn-normal"
										onclick="choose(4)">上传图片</button>
									<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
										<ul class="show_img_ul" id="video_cover"></ul>
									</blockquote>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">备注</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入备注" name="notes" class="layui-textarea"></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">售后保障</label>
								<div class="layui-input-block">
									<textarea placeholder="请输入售后保障" name="support" class="layui-textarea"></textarea>
								</div>
							</div>
							<div class="layui-form-item">
								<label class="layui-form-label">重量（克）</label>
								<div class="layui-input-block">
									<input type="number" name="weight" placeholder="请输入重量（克）" autocomplete="off"
										class="layui-input">
								</div>
							</div>
							<!--商品信息-->
						</div>
					</div>

					<div class="layui-form-item layui-layout-admin">
						<div class="layui-input-block">
							<div class="layui-footer" style="left: 0;">
								<!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button> -->
								<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<script src="../../../../layuiadmin/layui/layui.js"></script>
		<script src="../../../../js/jquery.min.js"></script>
		<script src="../../../../js/jquery.jqprint-0.3.js"></script>
		<script src="../../../../js/common.js"></script>
		<script>
			var _data = {
				id: getParam('id')
			}

			var img_arr_sort = [];
			// console.log(_data.id);
			function child(data, index) {
				$(" input[name=catid]").val(data.cat_id);
				$(" input[name=catname]").val(data.name);
				console.log(data)
			}

			function child_shop(data, index) {
				$(" input[name=shopid]").val(data.cat_id);
				$(" input[name=shopname]").val(data.name);
				console.log(data)
			}

			layui.config({
				base: '../../../../layuiadmin/' //静态资源所在路径
			}).extend({
				tinymce: '../tinymce/tinymce',
				index: 'lib/index' //主入口模块
			}).use(['index', 'form', 'laytpl', 'laydate', 'layedit', 'upload', 'tinymce'], function() {
				var $ = layui.$,
					admin = layui.admin,
					upload = layui.upload,
					laytpl = layui.laytpl,
					laydate = layui.laydate,
					form = layui.form,
					tinymce = layui.tinymce,
					layedit = layui.layedit;

				var img_arr = [],
					img_arr1 = [],
					img_arr2 = [],
					img_arr3 = [],
					img_arr4 = [];

				if (_data.id) {
					initdata();
				}

				on_off_show('radio');
				icon_type_show('checkbox')
				goods_type_show('radio')

				//				layedit.build('demo_editor'); //建立编辑器
				var edit = tinymce.render({
					elem: "#demo_editor",
					height: 600
				});

				//监听提交
				form.on('submit(demo1)', function(data) {
					var data = data.field;
					_data.goods_img = img_arr.join(',');

					_data.thumbnail_url = img_arr1.join(',');
					//					_data.gallery_url = img_arr2.join(',');
					_data.gallery_url = img_arr_sort.join(',') //可排序提交
					_data.video_url = img_arr3.join(',');
					_data.video_cover = img_arr4.join(',');


					console.log(edit)

					_data = Object.assign(_data, data);
					_data.content = edit.getContent();

					_data.client = ''
					for (item in data) {
						if (/^c/.test(item)) {
							if (item.substr(0, 6) == 'client') {
								_data.client += data[item] + ','
								console.log(item)
								console.log(data[item])
							}
						}
					}
					_data.client = (_data.client.substring(_data.client.length - 1) == ',') ? _data.client
						.substring(0, _data.client.length - 1) : _data.client;


					layer.confirm('确定要提交数据？', function() {
						loading();
						if (_data.client == 0) {
							_data.test_typ == '';
						}
						if (_data.id) {
							submitdata(server.op_updateproduct);
						} else {
							submitdata(server.op_addproduct);
						}
					}, function() {
						layer.msg('取消操作');
					});
					return false;
				});

				function submitdata(_url) {
					$.post(_url, _data, function(res, status) {
						if (status == 'success') {
							if (res.code == 0) {
								layer.alert('操作成功', function() {
									parent.layer.closeAll();
									parent.layui.table.reload('test-table-operate');
								});
							} else {
								layer.msg(res.msg);
							}
							closeloading();
						} else {
							closeloading();
							layer.msg('服务器连接错误');
						}
					});
				}

				window.choose = function(data) {
					layer.open({
						type: 2,
						title: '上传图片',
						shadeClose: false,
						shade: 0.5,
						maxmin: true, //开启最大化最小化按钮
						area: ['700px', '400px'],
						content: 'up_report.html?type=' + data,
						end: function() {},
						success: function() {}
					});
				}

				window.getimg = function(data, type) {
					console.log(data);
					if (data) {
						switch (type) {
							case '0':
								createli(data, 'zhutu', type)
								break;
							case '1':
								createli(data, 'thumbnail', type)
								break;
							case '2':
								createli(data, 'lunbo', type)
								break;
							case '3':
								createli(data, 'video_url', type)
								break;
							case '4':
								createli(data, 'video_cover', type)
								break;
							default:
								break;
						}
					}
				}
				window.delimg = function(i, type, _self) {
					console.log(type)
					var _type = String(type)
					layer.confirm('确定要删除图片？', function(index) {
						switch (_type) {
							case '0':
								img_arr.splice(i, 1)
								break;
							case '1':
								img_arr1.splice(i, 1)
								break;
							case '2':
								img_arr2.splice(i, 1)
								break;
							case '3':
								img_arr3.splice(i, 1)
								break;
							case '4':
								img_arr4.splice(i, 1)
								break;
							default:
								break;
						}
						$(_self).parent().remove();
						layer.close(index)
					}, function() {
						layer.msg('取消操作');
					});
					// console.log(i);
					// console.log(type);

				}

				function createli(data, dom, type) {
					var lihtml = '';
					switch (type) {
						case '0':
							if (data.indexOf(',') == -1) {
								img_arr.push(data)
							} else {
								for (var i = 0; i < data.split(',').length; i++) {
									img_arr.push(data.split(',')[i])
								}
							}
							for (var i = 0; i < img_arr.length; i++) {
								lihtml += '<li class="show_img_li">' +
									'<img src=' + img_arr[i] + ' >' +
									'<p onclick="delimg(' + i + ',0,this)">删除</p>' +
									'</li>'
							}
							break;
						case '1':
							if (data.indexOf(',') == -1) {
								img_arr1.push(data)
							} else {
								for (var i = 0; i < data.split(',').length; i++) {
									img_arr1.push(data.split(',')[i])
								}
							}
							for (var i = 0; i < img_arr1.length; i++) {
								lihtml += '<li class="show_img_li">' +
									'<img src=' + img_arr1[i] + ' >' +
									'<p onclick="delimg(' + i + ',1,this)">删除</p>' +
									'</li>'
							}
							break;
						case '2':
							if (data.indexOf(',') == -1) {
								img_arr2.push(data)
								img_arr_sort.push(data)
							} else {
								for (var i = 0; i < data.split(',').length; i++) {
									img_arr2.push(data.split(',')[i])
									img_arr_sort.push(data.split(',')[i])
								}
							}
							for (var i = 0; i < img_arr_sort.length; i++) {
								//								lihtml += '<li class="show_img_li">' +
								//									'<img src=' + img_arr2[i] + ' >' +
								//									'<p onclick="delimg(' + i + ',2,this)">删除</p>' +
								//									'</li>'

								lihtml +=
									'<li class="item_img" ><div class="operate"><i class="toleft layui-icon">&lt;</i><i class="toright layui-icon">&gt;</i><i  class="close layui-icon"><img style="height: 15px;width: 15px;" src="del.png"></i></div><img src="' +
									img_arr_sort[i] + '" class="img" ></li>'




							}


							break;
						case '3':
							if (data.indexOf(',') == -1) {
								img_arr3.push(data)
							} else {
								for (var i = 0; i < data.split(',').length; i++) {
									img_arr3.push(data.split(',')[i])
								}
							}
							for (var i = 0; i < img_arr3.length; i++) {
								lihtml += '<li class="show_img_li">' +
									'<video controls="controls" id="video{{index}}" width="320" height="240"><source src=' +
									img_arr3[i] + ' type="video/ogg" /><source src=' + img_arr3[i] +
									' video/mp4" /></video>' +
									'<p onclick="delimg(' + i + ',3,this)">删除</p>' +
									'</li>'
							}

							break;
						case '4':
							if (data.indexOf(',') == -1) {
								img_arr4.push(data)
							} else {
								for (var i = 0; i < data.split(',').length; i++) {
									img_arr4.push(data.split(',')[i])
								}
							}
							for (var i = 0; i < img_arr4.length; i++) {
								lihtml += '<li class="show_img_li">' +
									'<img src=' + img_arr4[i] + ' >' +
									'<p onclick="delimg(' + i + ',4,this)">删除</p>' +
									'</li>'
							}
							break;
						default:
							break;
					}
					$('#' + dom).html(lihtml);
				}
				window.searchdata = function(type) {
					switch (type) {
						case 'catid':
							layer.open({
								type: 2,
								title: '选择',
								shadeClose: false,
								shade: 0.5,
								maxmin: true, //开启最大化最小化按钮
								area: ['80%', '80%'],
								content: 'choose_cat.html',
								end: function() {},
								success: function() {}
							});
							break;
						case 'shopid':
							layer.open({
								type: 2,
								title: '选择',
								shadeClose: false,
								shade: 0.5,
								maxmin: true, //开启最大化最小化按钮
								area: ['80%', '80%'],
								content: 'choose_shop.html',
								end: function() {},
								success: function() {}
							});
							break;
						case 'brand_id':
							layer.open({
								type: 2,
								title: '选择品牌',
								shadeClose: false,
								shade: 0.5,
								maxmin: true, //开启最大化最小化按钮
								area: ['90%', '90%'],
								content: 'choose_brand.html',
								end: function() {
									_data.brand_id = $('input[name=brand_id]').val()
								},
								success: function() {}
							});
							break;
					}
				}

				/* 产品分类 */
				/* function product_cat(fid) {
					$.ajax({
						type: "get",
						url: server.op_queryproduct_catlist,
						data: {
							fid: fid
						},
						success: function(res) {
							if (res.code == 0) {
								var product_category = res.product_category.data;
								if (product_category.length > 0) {
									var product_category_html = '<option value="">请选择分类名称</option>';
									for (var i = 0; i < product_category.length; i++) {
										product_category_html += '<option value=' + product_category[i].id + '>' + product_category[i].name +
											'</option>'
									}
									$(".product_category").append(product_category_html);
									form.render('select')
								}
							}
						}
					});
				} */
				/*商品分类*/
				var initcatdata = function(fid) {
					var data1;
					if (fid) {
						$.ajax({
							url: server.op_queryproduct_catlist,
							data: {
								fid: fid
							},
							async: false,
							type: 'get',
							success: function(res) {
								if (res.code == 0) {
									var data = res.product_category.data;
									data1 = data;
								}
							},
							error: function(res) {
								errorshow();
							}
						})
					}
					return data1;
				}
				var creategoodsSelect = function(optionData, selectname) {
					var html = '';
					html += '<div class="layui-input-inline">';
					html += ' <select lay-filter=' + selectname + ' lay-verify="required" name=' + selectname + '>';
					html += '  <option value="">请选择</option>';
					for (var i = 0; i < optionData.length; i++) {
						html += ' <option value=' + optionData[i].id + ' title=' + optionData[i].id + '>' +
							optionData[i].name +
							'</option>';
					}
					html += ' </select>';
					html += '</div>';
					return html;
				}
				var goods_item = initcatdata(1);
				var initcat = function(domname, selected) {
					var selected = selected;
					var $selectWrap = $('#' + domname);

					$selectWrap.find('.layui-input-inline').remove();
					var html = creategoodsSelect(goods_item, domname);
					$selectWrap.append(html);
					if (selected) {
						var index = [];
						for (var i = 0; i < selected.length; i++) {
							var selectlist = $selectWrap.find('select>option')

							for (var j = 0; j < selectlist.length; j++) {
								var title = $(selectlist[j]).attr('title');
								if (title == selected[i]) {
									$(selectlist[j]).attr('selected', true);
								}
							}
							// 取出下级的选项值
							if (i != selected.length - 1) {
								var childItem = initcatdata(selected[i]);
								// 下级选项值存在则创建select
								if (childItem) {
									var html = creategoodsSelect(childItem, domname);
									$selectWrap.append(html);
								}
							}
						}
					}
					form.render('select');
					// 监听select
					form.on('select(' + domname + ')', function(data) {
						var $thisItem = $(data.elem).parent();
						$thisItem.nextAll('div.layui-input-inline').remove();

						var fid = data.elem[data.elem.selectedIndex].title;
						var cat_cn = data.value
						switch (domname) {
							case 'catid':
								_data.cat_id = fid
								break;
							default:
								break;
						}

						var childItem = initcatdata(fid);

						if (childItem.length > 0) {
							var html = creategoodsSelect(childItem, domname);
							$selectWrap.append(html);
							$selectWrap.find('select:last-child').attr('lay-verify', '');
							form.render('select');
						}
					});
				}

				initcat('catid');

				var goods = new Array();

				function querygoodsdata1(fid) {
					loading();
					goods = [];
					if (fid) {
						$.ajax({
							url: server.op_queryproduct_catlist,
							data: {
								id: fid
							},
							type: 'get',
							success: function(res) {
								if (res.code == 0) {
									var data = res.product_category.data;
									goods.unshift(data[0])
									if (data[0]) {
										var str = data[0].sid
										var sid = data[0].sid;
										querygoodsdata2(sid)
									} else {
										closeloading()
									}
								}
							},
							error: function(res) {
								errorshow();
							}
						})
					}
				}

				function querygoodsdata2(sid) {
					if (sid) {
						$.ajax({
							url: server.op_queryproduct_catlist,
							data: {
								sid: sid
							},
							type: 'get',
							success: function(res) {
								if (res.code == 0) {
									var data = res.product_category.data;
									if (goods[0].id != data[0].id) {
										goods.unshift(data[0])
									}
									if (data[0].fid != 1) {
										var sid = data[0].sid.substr(0, data[0].sid.lastIndexOf('.', data[0]
											.sid.lastIndexOf('.') - 1) + 1);
										/*var sid = data[0].sid;*/
										querygoodsdata2(sid)
									} else {
										var selected1 = [];
										for (var i = 0; i < goods.length; i++) {
											selected1.push(goods[i].id)
										}
										initcat('catid', selected1);
										closeloading()
									}
								}
							},
							error: function(res) {
								closeloading();
								errorshow();
							}
						})
					}
				}

				function initdata() {
					$.get(server.op_queryproductdetail, _data, function(res, status) {
						if (status == 'success') {
							if (res.code == 0) {
								var data = res.product
								//								if($("select[name=catname] option").length > 0) {
								//									$("select[name=catid]").val(data.data.catid);
								//								}
								data.data.goods_img ? createli(data.data.goods_img, 'zhutu', '0') : '',
									//data.data.thumbnail_url ? createli(data.data.thumbnail_url, 'thumbnail', '1') : '',
									//data.data.gallery_url ? createli(data.data.gallery_url, 'lunbo', '2') : '',
									data.data.video_url ? createli(data.data.video_url, 'video_url', '3') : '',
									data.data.video_cover ? createli(data.data.video_cover, 'video_cover', '4') :
									'',

									img_arr_sort = data.data.gallery_url ? data.data.gallery_url.split(",") : []
								console.log(img_arr_sort)
								for (var i = 0; i < img_arr_sort.length; i++) {
									$('#lunbo').append(
										'<li class="item_img" ><div class="operate"><i class="toleft layui-icon">&lt;</i><i class="toright layui-icon">&gt;</i><i  class="close layui-icon"><img style="height: 15px;width: 15px;" src="del.png"></i></div><img src="' +
										img_arr_sort[i] + '" class="img" ></li>');
								}


								//querygoodsdata1(data.data.catid, 'catid')
								console.log(data.data);
								form.val("test_detail", data.data);
								form.render();
								form.render('select');
								closeloading()

								onload_img();
								edit.setContent(data.data.content)
							} else {
								layer.msg(res.msg);
							}
						} else {
							layer.msg('服务器连接错误');
						}
					});
				}
				// 图片拖动排序 拖动变换元素顺序
				function onload_img() {
					var moveItem = document.getElementsByClassName('item_img');
					let pre_index;
					let end_index;
					var draggingElementPosition = null;
					var dragElement = null;
					for (let i = 0; i < moveItem.length; i++) {
						for (let a = 0; a < moveItem.length; a++) {
							moveItem[a].setAttribute("draggable", true);
						}


						moveItem[i].addEventListener('dragstart', function(evt) {
							dragElement = this;
							//dragElement = evt.targe 
							pre_index = $('.item_img').index($(this)) //移动前的下标 
						}, false);

						moveItem[i].addEventListener('drop', function(evt) {
							if (dragElement != this) {
								//this.parentNode.insertBefore(dragElement,this); //插入  
								const draggingElementOrder = Array.from(this.parentElement.children).indexOf(
									dragElement);
								const order = Array.from(this.parentElement.children).indexOf(this);
								draggingElementPosition = dragElement.getBoundingClientRect();
								//从大的序号移入到小的序号
								if (draggingElementOrder > order) {
									this.parentElement.insertBefore(dragElement, this);
								}
								//从小的序号移入到大的序号
								else {
									//节点不是最后一个
									if (this.nextElementSibling) {
										this.parentElement.insertBefore(dragElement, this.nextElementSibling);
									}
									// 节点是最后一个了，不能再用insertBefore
									else {
										this.parentElement.appendChild(dragElement);
									}
								}
								end_index = $('.item_img').index($(dragElement)) //移动后的下标  
							}

						}, false);
						moveItem[i].addEventListener('dragleave', function(evt) {
							var lists = $('.item_img');
							for (var j = 0; j < lists.length; j++) {
								lists.eq(j).j = j;
								var list = lists.eq(j).prevAll().length;
							}
							if (dragElement != this) {
								if (this == this.parentNode.lastElementChild || this == this.parentNode
									.lastChild) {
									this.parentNode.appendChild(dragElement);
								}
							}
						}, false)
					};
					document.ondragover = function(e) {
						e.preventDefault();
					}
					document.ondrop = function(e) { //释放鼠标后
						var s = img_arr_sort[pre_index]
						img_arr_sort.splice(pre_index, 1)
						img_arr_sort.splice(end_index, 0, s); //在指定的元素后插入
						console.log(img_arr_sort)
					}
				}


			});
			//点击多图上传的X,删除当前的图片   
			$(document).on("click", ".close", function() {
				var li_index = $(this).closest("li").index();
				$(this).closest("li").remove();
				img_arr_sort.splice(li_index, 1)
			});
			//多图上传点击<>左右移动图片
			$(document).on("click", ".layui-elem-quote li .toleft", function() {
				console.log("left")
				//#lunbo > li:nth-child(2) > div > i.toleft.layui-icon
				var li_index = $(this).closest("li").index();
				if (li_index >= 1) {
					$(this).closest("li").insertBefore($(this).closest("ul").find("li").eq(Number(li_index) - 1));
					var s = img_arr_sort[li_index]
					img_arr_sort.splice(li_index, 1)
					img_arr_sort.splice((Number(li_index) - 1), 0, s) //在指定的元素后插入
				}
			});
			$(document).on("click", ".layui-elem-quote li .toright", function() {
				var li_index = $(this).closest("li").index();
				$(this).closest("li").insertAfter($(this).closest("ul").find("li").eq(Number(li_index) + 1));
				var s = img_arr_sort[li_index]
				img_arr_sort.splice(li_index, 1)
				img_arr_sort.splice((Number(li_index) + 1), 0, s)
			});
		</script>
	</body>

</html>
